<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="HandheldFriendly" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <title>抽奖翻牌活动</title>
    <link rel="stylesheet" href="css/flip.css?v=2" />
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery.transit/0.9.12/jquery.transit.min.js"></script>
    <script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
    </script>
    <script src="js/flip.js?v=2"></script>
</head>
<body>
    <div class="banner">
        <img src="images/banner.jpg">
    </div>
    <div class="wrapper">
        <div class="container">
            <div class="time-card">
                <div class="text">
                    距离翻牌开始还有
                </div>
                <div class="time-digit">
                    <p id="time" >00:00:00</p>
                </div>
            </div>
            <div class="carousel">
                <div id="winning-list" class="text" data-id="">

                </div>
            </div>
            <div class="flips-wrapper">
                <div class="flips">
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back"></div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back"></div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back">

                        </div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back"></div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back"></div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back">

                        </div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back"></div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back"></div>
                    </div>
                    <div data-state="front">
                        <div class="front">
                            <p>IPhone6S</p>
                        </div>
                        <div class="back">

                        </div>
                    </div>
                </div>
                <div id="layer-flip" class="upper-layer hidden">
                    <a id="button-begin"></a>
                </div>
                <div id="layer-loading" class="upper-layer hidden">
                    <img src="images/loading.png">
                    <p>载入中</p>
                </div>
            </div>

            <div class="button">
                <a></a>
            </div>
            <div class="read-wrapper">
                <div class="read">
                    <b></b>
                    <b></b>
                    我已阅读并同意百度觅题
                    <a id="button-explanation">[活动规则]</a>
                </div>
            </div>
        </div>
    </div>

<div id="layer-upper" class="layer hidden">
    <div class="modal result-failed hidden">
        <a class="close" data-role="close-layer"></a>
        <img src="images/result-failed.png" />
        <p>抽奖失败，下个时段再来！</p>
    </div>
    <div class="modal result-no hidden">
        <a class="close" data-role="close-layer"></a>
        <img src="images/result-no.png" />
        <p>很遗憾呢  没有中奖</p>
    </div>
    <div class="modal result-yes hidden">
        <a class="close" data-role="close-layer"></a>
        <img src="images/result-yes.png" />
        <p>恭喜你获得<span id="result-name">Iphone6S</span>!</p>
        <div class="button">
            <a></a>
        </div>
    </div>
    <div class="modal explanation hidden">
        <a class="close" data-role="close-layer"></a>
        <div>
            <h2><span>01</span>活动规则</h2>
            <p>每个ID每日可参与三次翻卡活动；</p>
            <p>每日<span class="gold">12:00、14:00、20:00</span>翻卡活动开始；</p>
            <p>每时段翻卡时长持续3分钟，结束后活动将重新倒计时。</p>
            <h2><span>02</span>奖品说明</h2>
            <p class="intent"><b></b>抽中虚拟奖品有效期均以奖品说明为准；</p>
            <p class="intent"><b></b>抽中实物奖品的用户需在活动期间，请按要求填写邮寄资料，如未完善资料或资料填写有误，造成主办方无法寄送奖品的用户，视为自动弃奖；</p>
            <p class="intent"><b></b>所有奖品均在每月月中寄出，请保持您的联系电话畅通。</p>
            <h2><span>03</span>活动说明</h2>
            <p class="intent"><b></b>本次活动如有用户通过作弊行为或恶意扰乱活动的正常开展，百度高考将取消用户参与活动的资格，并保留进一步追究其法律责任的权利；
            </p>
            <p class="intent"><b></b>本次活动的最终解释权归百度高考团队所有。</p>
        </div>
    </div>
</div>
</body>